<script setup>
import { onMounted, provide, ref } from "vue";
import Dialog from "@/components/Dialog.vue";
import SearchBar from "@/components/SearchBar.vue";
import List from "./List.vue";

const dialogVisible = ref(false);
const urlRef = ref("");
const keywordRef = ref("");
const actionRef = ref("");
const searchBarRef = ref(null);


onMounted(() => {
  CONTEXTAPI.openDialog();
  CONTEXTAPI.onRendererEvent(callback);
})

const callback = () => searchBarRef.value.handleClick()

const clearUrl = () => urlRef.value = "";
// provide("dialog-url", { urlRef, clearUrl });
const setDialogVisible = (value) => {
  dialogVisible.value = value;
};
const setKeyword = (keyword) => {
  keywordRef.value = keyword;
};
provide("search-keyword", { keywordRef, setKeyword });
provide("dialog-visible", { dialogVisible, setDialogVisible });
</script>

<template>
  <main class="container">
    <SearchBar ref="searchBarRef" />
    <List />
    <Dialog v-if="dialogVisible" />
  </main>
</template>
<style scoped>
</style>